<template>
  <div class="object">
    <div name="title" @click="fold = !fold">
      <span>{{ keyName }}</span>
      <div name="fold" :style="{ transform: fold ? 'rotate(135deg)' : 'rotate(-45deg)'  }"></div>
    </div>
    <div name="line"></div>
    <div
      name="keys"
      :style="{ height: fold ? '0px' : '' }"
      style="border-left: 1px dashed #dadada;"
    >
      <component
        v-for="(childValue, childKey) in value"
        :key="childKey"
        :is="Array.isArray(childValue) ? 'arrayView': typeof childValue + 'View'"
        :key-name="childKey"
        :parent-key="childKey"
        :value="childValue"
        :is-select="childIsSelect"
        @change="change"
      ></component>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";
import StringView from "./string.vue";
import BooleanView from "./boolean.vue";
import NumberView from "./number.vue";
import ArrayView from "./array.vue";
import { IsSelect } from "../../typing";

@Component({
  components: { StringView, BooleanView, NumberView, ArrayView }
})
export default class ObjectView extends Vue {
  @Prop(String)
  public keyName: string;

  @Prop(Object)
  public value: any;

  @Prop()
  public isSelect: IsSelect;

  @Prop(String)
  public parentKey: string;

  public myValue: number;
  public fold: boolean = false;

  constructor(...args: any) {
    super(...args);
    this.myValue = this.value;
  }

  public change(keyName: string, value: any) {
    this.$emit("change", `${this.parentKey}.${keyName}`, value);
  }

  public childIsSelect(name: string) {
    return this.isSelect(`${this.keyName}.${name}`);
  }

  get syncValue() {
    this.myValue = this.value;
    return this.value ? "" : "";
  }
}
</script>

<style scoped>
.object div[name="title"] {
  font-weight: 600;
  line-height: 35px;
  cursor: pointer;
}

.object div[name="line"] {
  height: 1px;
  background: #9e9e9e;
  margin-bottom: 15px;
}

.object [name="fold"] {
  color: #000;
  width: 6px;
  height: 6px;
  border-bottom: solid 1px currentColor;
  border-left: solid 1px currentColor;
  display: inline-block;
  cursor: pointer;
  position: relative;
  top: -3px;
  left: 10px;
  transition: 0.3s;
  transform-origin: 25% 75%;
}
.object [name="keys"] {
  padding-left: 30px;
  transition: 0.3s;
  overflow: hidden;
}
</style>